<template>
  <view class="app-container my-bill-list-page">
    <view class="my-bill-list">
      <view class="my-bill-item" v-for="(item,index) in list" :key="item.id">
        <hxk-card>
          <template v-slot:header>
            <view class="header">
              <view class="title">{{ billTypeMapping[item.billType] }}</view>
            </view>
          </template>
          <template v-slot:body>
            <view class="body">
              <view class="rental-period">
                <text>账单周期：{{ formatDate(item.billStartTime) }} 至 {{ formatDate(item.billEndTime) }}</text>
              </view>
              <view class="total-amount">
                <text>总金额：{{ item.cost }}元</text>
              </view>
              <view class="latest-pay-date">
                <text>最晚付款日期: {{ formatDate(item.latestPayTime) }}</text>
              </view>
            </view>
          </template>
          <!--只有费用账单才能查看费用明细-->
          <template v-slot:footer>
            <view class="footer">
              <view class="btn">
                <u-button type="info" text="费用明细" @click="handleViewItem(index)"></u-button>
              </view>
            </view>
          </template>

        </hxk-card>
      </view>
    </view>

    <u-popup :show="expenseItemShow" @close="close" mode="center" round="20rpx">
      <view class="popup-header">
        <view class="popup-title">费用明细</view>
        <view class="popup-close" @click="close">
          <u-icon name="close"></u-icon>
        </view>
      </view>
      <view class="popup-items">
        <view class="item" v-for="item in expenseItemList" :key="item.id">
          <view class="item-title">{{ item.itemName }}</view>
          <view class="item-amount">{{ item.itemPrice }}元</view>
        </view>
      </view>
    </u-popup>

  </view>
</template>

)
<script>
import {myBillListByContractId} from "@/api/mine/other";
import hxkCard from "@/components/hxk-card/index";
import {formatDate} from "@/utils/time";

export default {
  components: {
    hxkCard
  },
  data() {
    return {
      // 费用明细弹窗
      expenseItemShow: false,
      expenseItemList: [],
      lesseeContractId: null,
      list: [],
      billTypeMapping: {
        // 押金账单 2费用账单
        "1": "押金账单",
        "2": "费用账单"
      }
    }
  },
  onLoad(options) {
    this.lesseeContractId = options.lesseeContractId;
    console.log("bill-list-page" + options.lesseeContractId)
    this.getList(this.lesseeContractId)
  },
  methods: {
    formatDate,
    getList(lesseeContractId) {
      myBillListByContractId(lesseeContractId).then(res => {
        this.list = res.data;
      })
    },
    handleViewItem(index) {
      this.expenseItemShow = true;
      this.expenseItemList = this.list[index].houseBillItemMerges
    },
    close() {
      this.expenseItemShow = false;
    },
  },
}
</script>

<style lang="scss" scoped>
.my-bill-list-page {
  .my-bill-list {
    padding: 20rpx;

    .my-bill-item {
      margin-bottom: 20rpx;

      .header {
        display: flex;
        justify-content: space-between;

        .title {
          font-size: 32rpx;
          color: #111;
        }
      }

      .body {
        .rental-period {
          font-size: 28rpx;
          margin-top: 20rpx;
        }

        .total-amount {
          font-size: 28rpx;
          margin-top: 20rpx;
        }

        .latest-pay-date {
          font-size: 28rpx;
          margin-top: 20rpx;

        }

      }

      .footer {
        display: flex;
        justify-content: flex-end;

        .btn {
          font-size: 28rpx;
          ::v-deep .u-button--info {
            border: none !important;
            color: #000000;
          }
        }
      }

    }
  }

  .popup-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    border-bottom: 1px solid #eee;

    .popup-title {
      font-size: 32rpx;
      color: #111;
    }

    .popup-close {
      font-size: 32rpx;
      color: #111;
      cursor: pointer;
    }
  }
  .popup-items {
    padding: 20rpx;

    .item {
      display: flex;
      border-bottom: 1px solid #eee;
      padding: 20rpx;
      justify-content: space-between;
      //margin-bottom: 40rpx;

      .item-title {
        width: 400rpx;
        font-size: 32rpx;
      }

      .item-amount {
        font-size: 32rpx;
        width: 200rpx;
        text-align: right;
      }

    }
    &.popup-items .item:last-child {
      border-bottom: none;
    }
  }

}

</style>